package collapsible

import "github.com/templui/templui/internal/utils"

type Props struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	Open       bool
}

type TriggerProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type ContentProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

templ Collapsible(props ...Props) {
	{{ var p Props }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	if p.ID == "" {
		{{ p.ID = utils.RandomID() }}
	}
	<div
		id={ p.ID }
		class={ utils.TwMerge("", p.Class) }
		data-tui-collapsible="root"
		data-tui-collapsible-state={ utils.IfElse(p.Open, "open", "closed") }
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ Trigger(props ...TriggerProps) {
	{{ var p TriggerProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("", p.Class) }
		data-tui-collapsible="trigger"
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ Content(props ...ContentProps) {
	{{ var p ContentProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge(
			"grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 ease-out [[data-tui-collapsible-state=open]_&]:grid-rows-[1fr]",
			p.Class,
		) }
		data-tui-collapsible="content"
		{ p.Attributes... }
	>
		<div class="overflow-hidden">
			{ children... }
		</div>
	</div>
}
